<template>
  <div class="config-container">
    <!-- 返回按钮 -->
    <div class="header">
      <el-button class="back-btn" @click="goBack">返回</el-button>
    </div>

    <!-- 步骤导航 -->
    <div class="step-nav">
      <el-button
        v-for="(step, index) in steps"
        :key="index"
        :type="currentStep === step.step ? 'primary' : ''"
        :disabled="currentStep < step.step"
        @click="handleStepClick(step.step)"
        :class="{ 'disabled-btn': currentStep < step.step }"
      >
        {{ step.name }}
      </el-button>
    </div>

    <!-- 当前步骤内容 -->
    <router-view v-slot="{ Component }">
  <keep-alive :include="['CloseConfigA', 'CloseConfigB', 'CloseConfigC']">
    <component :is="Component" />
  </keep-alive>
</router-view>

    <!-- 操作按钮 -->
    <div class="action-buttons" v-if="currentStep < 3">
      <el-button v-if="currentStep > 1" @click="goBackStep">上一步</el-button>
      <el-button type="primary" @click="goNextStep">下一步</el-button>
    </div>
    <div class="action-buttons" v-else>
      <el-button type="primary" @click="okBack">完成</el-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { computed } from 'vue';

const router = useRouter();
const route = useRoute();
// 监听路由变化，获取闭环ID
console.log('Current Route:', route);
// 获取当前闭环ID（来自路由的query参数）
const closeLoopId = computed(() => route.query.closeLoopId);

// 定义步骤信息
const steps = [
  { name: '基本信息', step: 1, path: 'CloseConfigA' },
  { name: '医嘱配置', step: 2, path: 'CloseConfigB' },
  { name: '节点配置', step: 3, path: 'CloseConfigC' },
];

// 计算当前步骤（根据当前路由的 meta.step）
const currentStep = computed(() => {
  return parseInt(route.query.step, 10) || 1; // 默认步骤1
});

// 处理下一步
const goNextStep = () => {
  if (currentStep.value < 3) {
    const nextStep = currentStep.value + 1;
    const targetPath = steps[nextStep - 1].path;
    router.push({
      name: targetPath,
      
      query: { 
        step: nextStep,
        closeLoopId: closeLoopId.value 
       }, //传递 step 参数
    });
  }
};

// 处理回退
const goBackStep = () => {
  if (currentStep.value > 1) {
    const prevStep = currentStep.value - 1;
    const targetPath = steps[prevStep - 1].path;
    router.push({
      name: targetPath,
      query: { 
        step: prevStep,
        closeLoopId: closeLoopId.value 
       }, // 传递 step 参数
    });
  }
};

// 处理步骤按钮点击
const handleStepClick = (stepNumber) => {
  if (stepNumber <= currentStep.value) {
    const targetPath = steps[stepNumber - 1].path;
    router.push({
      name: targetPath,
      query: { 
        step: stepNumber,
        closeLoopId: closeLoopId.value 
       }, // 传递 step 参数
    });
  }
};
console.log('Current Step:', currentStep.value);
// 返回按钮逻辑
const goBack = () => {
  router.push('/Config'); // 返回配置页面
  //router.back();
  // 或者使用 router.back() 返回上一个页面
};

const okBack = () => {
  router.push('/Config'); // 返回配置页面
  // 或者使用 router.back() 返回上一个页面
};

// // 页面首次加载时获取数据
// onMounted(() => {
//   store.fetchCloseLoopList();
// });
// // 当组件被激活时（如从缓存恢复）重新加载数据
// onActivated(() => {
//   store.fetchCloseLoopList();
// });
// watch(
//   () => route.path,
//   (newPath) => {
//     if (newPath === '/Config') {
//       //store.fetchCloseLoopList();
//     }
//   }
// );

</script>

<style scoped>
/* 步骤导航样式 */
.step-nav {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

/* 禁用按钮样式 */
.disabled-btn {
  cursor: not-allowed;
  background-color: #f5f7fa !important;
  border-color: #e4e7ed !important;
  color: #c0c4cc !important;
}

/* 高亮按钮样式 */
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
}

.config-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>